<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Details</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!--top icon-->
    <link rel="shortcut icon" th:href="@{/ChongYouIcon.ico}" type="image/x-icon"/>
    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
    <script>function show(id) {
        let div = document.getElementById(id);
        div.style.visibility="visible";
        div.style.display="block";
    }
    </script>
</head>

<body>
<!--导航栏-->
<div th:replace="~{common/common::topbar}"></div>
<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <div th:replace="~{common/common::sidebar(active='plaza')}"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div>
                <div style="margin-bottom: 10px">
                    <a style="outline: none" class="d-flex align-items-center text-muted" th:href="@{/getQ}"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-left-square" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
                    </svg></a>
                </div>

            <h2>Details</h2></div>
            <hr>
            <h3 th:text="'@'+${param.postId}"></h3><p th:text="${param.date}" style="color: #6c757d"></p>
            <div ><h4 th:text="${param.question}"></h4></div>
            <hr>
            <div style="display: flex">
                <h3>Comment</h3><h3><p th:text="'('+${num}+')'"></p></h3>
            </div>
            <div>
                <span><h5><p th:text="${session.userName}" style="color: #6c757d"></p></h5></span>
                <form class="form-signin" th:action="@{/comment}" method="get">
                <span style="display: flex;flex-direction: row;justify-content: flex-start" >
                    <input type="hidden" name="qid" th:value="${param.qid}">
                    <input type="hidden" name="fromId" th:value="${session.userName}">
                    <input type="hidden" name="postId" th:value="${param.postId}">
                    <input type="hidden" name="date" th:value="${param.date}">
                    <input type="hidden" name="question" th:value="${param.question}">
                    <textarea class="form-control"style="width: 50%" rows="1" id="exampleInputArticleDescription" placeholder="Post a friendly comment" name="content"></textarea>
                    <pre>  </pre>
                    <button type="submit" class="btn btn-default" style="background-color: #80bdff;color: #ffffff">Release</button>
                </span></form>
                    <div><pre> </pre></div>
                <!--评论区-->
                    <div th:each="index:${#numbers.sequence(comments.size()-1,0,-1)}" th:with="a=100">
                        <div style="display: flex">
                            <h4><b th:text="'@'+${comments[index].fromId}"></b></h4>
                        </div>
                        <p class="lead" th:text="${comments[index].content}"></p>
                        <div style="display: flex">
                            <span><p th:text="${#dates.format(comments[index].time,'yyyy-MM-dd HH:mm:ss')}" style="color: #6c757d"></p></span>
                            <span  style="padding-left: 20px">
                                <a onclick="alert('别点了，未开发！')" style="color: #999999">
                       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
  <path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"/>
                                </svg></a>
                            </span>
                            <div style="padding-left: 20px">
                                <a onclick="alert('别点了，未开发！')" style="color: #999999">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-down" viewBox="0 0 16 16">
                                <path d="M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856 0 .289-.036.586-.113.856-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a9.877 9.877 0 0 1-.443-.05 9.364 9.364 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964l-.261.065zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a8.912 8.912 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.224 2.224 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.866.866 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1z"/>
                                </svg></a>
                            </div>
                            <a style="padding-left: 20px;color: #999999"  th:attr="dt=${indexStat.index}" th:onclick="show(this.getAttribute('dt')) ">Reply</a>
                        </div>
                        <div th:with="mid=${map.containsKey(comments[index].mid)?comments[index].mid:0}">
                    <!--回复区域-->
                            <div  th:style="${mid==0?'display:none':'display:block'}"  th:each="i:${#numbers.sequence(0,map.get(mid).size()-1,1)}">
                                <div style="background-color: #EEEEEE;width: 70%;padding-top: 10px;padding-bottom: 10px;padding-left: 20px">
                                    <div th:text="'@'+${map.get(mid)[i].fromId}+' reply to @'+${map.get(mid)[i].toId}+'  :  '+${map.get(mid)[i].content}"></div>
                                    <div style="display: flex">
                                        <div th:text="${#dates.format(map.get(mid)[i].time,'yyyy-MM-dd HH:mm:ss')}" style="color: #6c757d"></div>
                                        <div  style="padding-left: 20px">
                                <a  style="color: #999999" onclick="alert('别点了，未开发！')">
                       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
  <path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"/>
                                </svg></a>
                            </div>
                                        <div style="padding-left: 20px">
                                            <a onclick="alert('别点了，未开发！')" style="color: #999999">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-down" viewBox="0 0 16 16">
                                                    <path d="M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856 0 .289-.036.586-.113.856-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a9.877 9.877 0 0 1-.443-.05 9.364 9.364 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964l-.261.065zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a8.912 8.912 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.224 2.224 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.866.866 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1z"/>
                                                </svg></a>
                                    </div>
                                        <a style="padding-left: 20px;color: #999999"  th:attr="dt=${indexStat.index}+'2'+${iStat.index}"  th:onclick="show(this.getAttribute('dt')) ">Reply</a>
                                </div>
                                    <!--回复框2-->
                                    <div th:class="yyy" th:id="${indexStat.index}+'2'+${iStat.index}" style="visibility: hidden;display: none;padding-top:5px ;">
                                        <form class="form-signin" th:action="@{/reply}" method="get">
                                    <span style="display: flex;flex-direction: row;justify-content: flex-start" >
                                        <span style="padding-top: 5px"><h6 th:text="'@'+${session.userName}" style="color: #6c757d"></h6></span>
                                        <input type="hidden" name="qid" th:value="${param.qid}">
                                        <input type="hidden" name="question" th:value="${param.question}">
                                        <input type="hidden" name="postId" th:value="${param.postId}">
                                        <input type="hidden" name="date" th:value="${param.date}">
                                        <input type="hidden" name="fromId" th:value="${session.userName}">
                                        <input type="hidden" name="mid" th:value="${comments[index].mid}">
                                        <input type="hidden" name="toId" th:value="${map.get(mid)[i].fromId}">
                                        <input type="hidden" name="pContent" th:value="${map.get(mid)[i].Content}">
                                        <pre>  </pre>
                                        <textarea class="form-control"type="" style="width: 50%" rows="1"  th:placeholder="'Reply to @'+${map.get(mid)[i].fromId}" name="content"></textarea>
                                        <pre>  </pre>
                                        <button type="submit" class="btn btn-default" style="background-color: #80bdff;color: #ffffff">Reply</button>
                                    </span></form>
                                    </div>
                                </div>
                            </div>
                        </div>

                <!--回复框-->
                        <div class="yyy" th:id="${indexStat.index}" style="visibility: hidden;display: none;padding-top:5px ;">
                            <form class="form-signin" th:action="@{/reply}" method="get">
                                    <span style="display: flex;flex-direction: row;justify-content: flex-start" >
                                        <span style="padding-top: 5px"><h6 th:text="'@'+${session.userName}" style="color: #6c757d"></h6></span>
                                        <input type="hidden" name="qid" th:value="${param.qid}">
                                        <input type="hidden" name="question" th:value="${param.question}">
                                        <input type="hidden" name="postId" th:value="${param.postId}">
                                        <input type="hidden" name="date" th:value="${param.date}">
                                        <input type="hidden" name="fromId" th:value="${session.userName}">
                                        <input type="hidden" name="mid" th:value="${comments[index].mid}">
                                        <input type="hidden" name="toId" th:value="${comments[index].fromId}">
                                        <input type="hidden" name="pContent" th:value="${comments[index].content}">
                                        <pre>  </pre>
                                        <textarea class="form-control"type="" style="width: 50%" rows="1"  th:placeholder="'Reply to @'+${comments[index].fromId}" name="content"></textarea>
                                        <pre>  </pre>
                                        <button type="submit" class="btn btn-default" style="background-color: #80bdff;color: #ffffff">Reply</button>
                                    </span></form>
                        </div>
                        <hr>
                    </div>

            </div>

        </main>
    </div>

</div>

</body>

</html>